<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${questionDTO.title}"></title>
    <link rel="stylesheet" href="/css/bootstrap.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <script src="/js/JQuery.js"></script>
    <script type="application/javascript" src="/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="/js/comment02.js"></script>
    <link rel="stylesheet" href="/css/index.css"/>
    <link rel="stylesheet" href="/css/detail.css"/>
</head>
<body>
<!--导入navigation.html中的nav-->
<div th:insert="~{navigation :: nav}"></div>
<!--主要内容模块-->
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 row-left">
            <!--左边布局-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3><span th:text="${questionDTO.title}"></span></h3>
                <span class="state-text">
                    作者：<span th:text="${questionDTO.user.loginName}"></span>
                    <span class="margin-left-right">|</span>
                    发布日期：<span th:text="${#dates.format(questionDTO.gmtCreate,'yyyy-MM-dd HH:mm:ss')}"></span>
                    <span class="margin-left-right">|</span>
                    阅读数：<span th:text="${questionDTO.readCount}"></span>
                </span>
                <!--标签展示模块-->
                <div class="labels">
                    <span class="label label-primary">标签：</span>
                    <span class="label label-info label-marr5" th:each="tag : ${questionDTO.tag.split(',')}">
                        <span class="glyphicon glyphicon-tags"></span>
                        <span class="label label-info" th:text="${tag}"></span>
                    </span>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--问题描述-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4 th:text="${questionDTO.description}"></h4>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!--问题编辑-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                     th:if="${session.user != null && questionDTO.creatorId == session.user.getId()}">

                    <a th:href="@{'/askquestion/'+${questionDTO.id}}" class="edit-question">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>问题编辑
                    </a>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
            <!--回复数-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>
                    <span th:text="${questionDTO.commentCount}"></span>&nbsp;个回复
                </h4>
                <hr id="comment-sp" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            </div>
            <!--评论内容展示模块-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-b10 comments"
                 th:each="commentDTO : ${commentDTOList}">
                <!--每个用户的回复内容展示-->
                <!--评论用户头像-->
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" th:src="${commentDTO.user.getAvatarUrl()}" alt="...">
                    </a>
                </div>
                <!--评论内容-->
                <div class="media-body">
                    <h4 class="media-heading" th:text="${commentDTO.user.getLoginName()}"></h4>
                    <span th:text="${commentDTO.getCommentContent()}"></span>
                </div>
                <!--评论查看按钮-->
                <div class="comment-menu">
                    <span class="glyphicon glyphicon-thumbs-up margin-10p" th:text="${commentDTO.likeCount+'个点赞'}"></span>
                    <!--二级评论按钮-->
                    <span class="glyphicon glyphicon-comment margin-15" th:data-id="${commentDTO.id}"
                          onclick="collapseComments(this)" th:text="${commentDTO.commentCount+'个评论'}">

                    </span>
                    <span class="pull-right"
                          th:text="${#dates.format(commentDTO.gmtCreate,'yyyy-MM-dd HH:mm:ss')}"></span>

                </div>
                <!--二级评论内容展示-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
                     th:id="${'comment-'+commentDTO.id}">
                    <!--<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-b10 comments"
                         th:each="commentDTO : ${commentDTOList}">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object" th:src="${commentDTO.user.getAvatarUrl()}" alt="...">
                            </a>
                        </div>
                        &lt;!&ndash;评论内容&ndash;&gt;
                        <div class="media-body">
                            <h4 class="media-heading" th:text="${commentDTO.user.getLoginName()}"></h4>
                            <span th:text="${commentDTO.getCommentContent()}"></span>
                        </div>
                        <div class="comment-menu">
                            <span class="pull-right"
                            th:text="${#dates.format(commentDTO.gmtCreate,'yyyy-MM-dd HH:mm:ss')}"></span>
                        </div>
                    </div>-->
                    <!--输入二级评论内容-->
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input type="text" class="form-control" placeholder="评论一下..." th:id="${'input-'+commentDTO.id}" />
                        <div th:id="${'comment_error2'+commentDTO.id}" hidden="hidden"
                             class="col-lg-12 col-md-12 col-sm-12 col-xs-12 alert alert-danger" role="alert"
                             style="margin-top: 10px;"></div>
                        <button type="button" class="btn btn-success pull-right" onclick="comment(this)" th:data-id="${commentDTO.id}">评论</button>
                    </div>
                </div>

            </div>
            <!--问题评论-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment">
                <!--评论头像-->
                <div class="comment-avatar">
                    <span><h4 class="commonter">回复人：</h4></span>
                    <img th:src="${session.user.avatarUrl}" alt="..." class="img-rounded media-object1">
                    <span th:text="${session.user.loginName}"></span>
                </div>
                <!--问题回复内容-->
                <input type="hidden" id="question_id" th:value="${questionDTO.id}">
                <textarea placeholder="请输入回复内容..." class="form-control" rows="6" id="comment_content"></textarea>
                <div id="comment_error" hidden="hidden"
                     class="col-lg-12 col-md-12 col-sm-12 col-xs-12 alert alert-danger" role="alert"
                     style="margin-top: 10px;"></div>
                <button onclick="post()" type="button" class="btn btn-success btn-comment">回复</button>
            </div>
        </div>
        <!--右边布局-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12" style="padding-top: 30px; margin-bottom: 30px">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>提问者：</h4>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-circle" th:src="${questionDTO.user.getAvatarUrl()}" alt="...">
                            <span th:text="${questionDTO.user.loginName}"></span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-t10">
                <h4>相关问题：</h4>
                <ul class="related-questions">
                    <li th:each="related : ${relatedQuestions}">
                        <a th:href="${'/questiondetail/'+related.id}" th:text="${related.title}">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>